<template>
  <div class="selection">
    <div class="title">
      成绩查询
    </div>
    <div class="searchBox">
      <el-input id="searchid"
                v-model="stuid"
                placeholder="input ID for searching"
                clearable />
      <el-button type="primary"
                 @click="select()">Search</el-button>
    </div>
    <div>
      <el-input id="showData"
                v-model="grade"
                type="textarea"
                rows="10"
                placeholder="Data Show here"
                clearable />
    </div>
    <p>
      修改将跳转成绩录入界面，重新录入以覆盖修改成绩
    </p>
    <div class="backbtn">
      <el-button type="primary"
                 size="large"
                 @click="del()">删除</el-button>
      <el-button type="primary"
                 size="large"
                 @click="toupd()"
                 title="重新录入成绩以覆盖">修改</el-button>
      <el-button type="primary"
                 size="large"
                 @click="toIndex()">回到首页</el-button>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: "selection",
  methods: {
    toIndex () {
      this.$router.push('/');
    },
    toupd () {
      this.$router.push('/updgrades')
    },
    async select () {
      var Stuid = this.stuid;
      axios({
        method: 'post',
        url: 'http://localhost:7001/selgrades',
        data: { "Stuid": Stuid },
        timeout: 1000,
        headers: { 'Content-Type': 'application/json' }
      }).then(response => {
        var grades = JSON.parse(JSON.stringify(response.data));
        var id = grades[0].id.toString();
        var mat = grades[0].mathG.toString();
        var eng = grades[0].englishG.toString();
        var che = grades[0].chemistryG.toString();
        this.grade = "学号" + id + '\n' + "数学成绩" + mat + '\n' + "英语成绩" + eng + '\n' + "化学成绩" + che;
      }).catch((error) => {
        this.grade = "该学号学生不存在或数据未录入";
      });
    },
    del () {
      var Stuid = this.stuid;
      axios({
        method: 'post',
        url: 'http://localhost:7001/delgrades',
        data: { "stuid": Stuid },
        timeout: 1000,
        headers: { 'Content-Type': 'application/json' }
      }).then(response => {
        alert("记录已删除")
        console.log(response)
      }).catch((error) => {
        console.log(error)
      });
    },
  },
  data () {
    return {
      stuid: '',
      grade: '',
    }
  }
}
</script>
<style>
.selection {
  background: url("../../../static/img/SelectBGP.png");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
  margin-top: -55px;
}
.title {
  margin-top: 20px;
}
.searchBox {
  margin-top: 50px;
}
.searchBox .el-input {
  width: 50%;
}
.backbtn {
  margin-top: 60px;
}
#showData {
  width: 50%;
  margin: 0 auto;
  margin-top: 120px;
}
</style>
